<template>
	<view>
		<cu-custom :isBack="true" :bgColor="'bg-black'" :backColor="'text-white'">
			<block slot="backText">
				<view class="text-white ">{{ backname }}</view>
			</block>
		</cu-custom>
		<view class="bg-white padding">
			<scroll-view scroll-x class="nav">
				<view
					class="cu-item flex-sub"
					:class="index == TabCur ? 'text-black,cur' : ''"
					v-for="(item, index) in ['房间信息']"
					:key="index"
					@click="tabSelect"
					:data-id="index"
				>
					{{ item }}
				</view>
			</scroll-view>
		</view>
		<view v-show="TabCur == 0">
			<van-cell-group>
				<van-field type="textarea" size="large" autosize :value="name" @input="name = $event.detail" label="房间名" placeholder="请填写房间名" required maxlength="20" />
				<van-field :value="number" @input="number = $event.detail" size="large" label="房号" placeholder="请填写房号" required :border="false" />
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						<text class="text-red">*</text>
						房间封面
					</view>
					<view class="action"><!-- {{imgList.length}}/1 --></view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" @click="ViewImage" :data-url="$isHttp(cover)" v-if="cover != ''">
							<image :src="$isHttp(cover)" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @click.stop="DelImg" :data-index="2"><text class="cuIcon-close"></text></view>
						</view>
						<view class="solids" @click="ChooseImage(2)" v-if="cover == ''"><text class="cuIcon-cameraadd"></text></view>
					</view>
				</view>
			</van-cell-group>

			<view class="padding-xl"><button @click="submit" class="cu-btn block bg-black margin-tb-sm lg" :loading="false">提交</button></view>
		</view>
	</view>
</template>

<script>
import { baseUrl } from '../../initial.js';
import { validate, string, util, isValid } from 'valid.js';
export default {
	data() {
		return {
			backname: '新增房间',
			id: '',
			TabCur: 0,

			show: false,

			// areaList: area,

			name: '',
			number: '', //房号
			cover: '', //封面
		};
	},
	onLoad(option) {
		if (option.id != undefined) {
			this.backname = '编辑房间';
			this.id = option.id;
			this.$u.adminApi
				.getRoom({
					roomId: option.id
				})
				.then(res => {
					this.name = res.data.name;
					this.number = res.data.number;
					this.cover = res.data.picture;
				});
		}
	},
	methods: {
		submit() {
			if (!isValid(this.name, [string.length(1, 20), util.isRequired])) {
				this.$textToast('房间名不符合要求');
				return;
			}
			if (!isValid(this.number, [util.isRequired])) {
				this.$textToast('请填写房号');
				return;
			}
			if (!isValid(this.cover, [util.isRequired])) {
				this.$textToast('请上传房间封面');
				return;
			}
			let dataobj = {
				name: this.name,
				number: this.number,
				picture: this.cover,
				storeId: this.vuex_bussinessId,
				roomId:this.id
			};
			if (this.id === '') {
				this.$u.adminApi.addRoom(dataobj).then(res => {
					if (res.code == 200) {
						this.$successToast(res.message);
						uni.navigateBack();
					}
				});
			} else {
				this.$u.adminApi.updateRoom(dataobj).then(res => {
					if (res.code == 200) {
						this.$successToast(res.message);
						uni.navigateBack();
					}
				});
			}
		},
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
		},
		ChooseImage(index) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: res => {
					uni.uploadFile({
						url: baseUrl + '/store/upload', //仅为示例，非真实的接口地址
						filePath: res.tempFilePaths[0],
						name: 'file',
						header: {
							Authorization: 'Bearer ' + this.vuex_token
						},
						formData: {
							select: index
						},
						success: uploadFileRes => {
							switch (index) {
								case 0:
									break;
								case 1:
									break;
								case 2:
									this.cover = JSON.parse(uploadFileRes.data).data;
									break;
								case 3:
									break;
								case 4:
									break;
								case 5:
									break;
								default:
								// 默认代码块
							}
						}
					});
				}
			});
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '贴贴',
				content: '确定要删除吗？',
				cancelText: '再看看',
				confirmText: '再见',
				success: res => {
					if (res.confirm) {
						switch (e.currentTarget.dataset.index) {
							case 0:
								this.logo = '';
								break;
							case 1:
								this.yyzz = '';
								break;
							case 2:
								this.cover = '';
								break;
							case 3:
								this.cover = '';
								break;
							case 4:
								// 代码块
								break;
							case 5:
								this.bgm = '';
								break;
							default:
							// 默认代码块
						}
					}
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped></style>
